<template>
  <div>
    <template v-for="(item, idx) in buttonArr" :key="idx">
      <!-- 有权限 并且 不是更多按钮 -->
      <el-button
        v-if="!item.more && item.hideCode"
        :type="item.type"
        :icon="item.icon"
        @click="item?.clickFn"
        v-Permission="[item.hideCode]"
        >{{ item.label }}</el-button
      >
      <!-- 无权限 代表全部人员都能看 -->
      <el-button
        v-else-if="!item.hideCode && !item.more"
        :type="item.type"
        :icon="item.icon"
        @click="item?.clickFn"
        >{{ item.label }}</el-button
      >
      <!-- 更多按钮 -->
      <el-dropdown v-else-if="item.more" style="margin-left: 10px">
        <el-button :type="item.type" :icon="item.icon">
          {{ item.label }}
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="(dropdown, index) in item.dropdownItem"
              :key="index"
              @click="dropdown?.clickFn"
              >{{ dropdown.label }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
  </div>
</template>

<script setup lang="ts">
import type { ButtonType } from "element-plus";

// 传过来按钮详情
interface buttonArrDetails {
  type: ButtonType | any; //类型
  icon?: any; //按钮图标
  label: string; //按钮文本
  hideCode?: string; //按钮权限
  clickFn?: Function; //按钮方法
  more?: Boolean; //如果为更多按钮
  dropdownItem?: Array<{ label: string; clickFn: Function }>;
}

// 定义穿过来的props key
interface propsIntface {
  buttonArr: Array<buttonArrDetails>;
}

// 接受props
const props = withDefaults(defineProps<propsIntface>(), {});
</script>

<style lang="scss" scoped></style>
